<template>
  <div class="page has-navbar has-tabbar" v-tabbar-menu-index="3">
    <von-header theme="light">
        <span slot="title">我的</span>
    </von-header>
    <div class="page-content padding-top">	
    	<div class="user-box clearfix" @click="showPhoneNumberModal()">
    		<div class="user-img"><img src="static/images/avatar.png"></div>
    		<div class="user-info">
    			<p>{{session.userName}}</p>
    			<p>{{session.userMobile}}</p>
    			<p>{{session.marketName}}</p>
    		</div>
    	</div>
    	<list class="list-ios">
    		<item class="item-icon-right" v-if="session.resourceList[0].resourceList[0]?session.resourceList[0].resourceList[0].resourceId != '02390':true" @click.native="gofavorite()">我的收藏<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item>
    		<item class="item-icon-right" @click.native="userFeedback()">意见反馈<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item>
        <item class="item-icon-right" @click.native="$router.forward('/notice')">公告<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item>
	    	<!-- <item class="item-icon-right" @click.native="showMessageModal()">我的消息<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item> -->
	    	<item class="item-icon-right" @click.native="goabout()">关于我们<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item>
	    	<item class="item-icon-right" @click.native="showPasswordModal()">修改密码<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item>
	    	
	    </list>
	    <div class="outbtn"><md-button class="button button-positive button-block" @click.native="showOutPopup()">解绑</md-button></div>
    </div>
  </div>
</template>
<script>
import messageModal from '../user/message.vue'
import phoneNumberModal from '../user/phoneNumber.vue'
import passwordModal from '../user/password.vue'
import { bus } from 'bus.js'
  export default {
    data(){
      return {
        messageModal:null,
        phoneNumberModal:null,
      	passwordModal:null,
        session:sess.get('userSession'),
      }
    },
    mounted() {
      $modal.fromComponent(messageModal, {
        title: '我的消息',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.messageModal = modal;
      });
      $modal.fromComponent(phoneNumberModal, {
        title: '修改个人信息',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.phoneNumberModal = modal;
      });
      $modal.fromComponent(passwordModal, {
        title: '修改密码',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.passwordModal = modal;
      });
    },
    created(){
      bus.$on('password', () => {
        this.passwordModal.hide();
      });
      bus.$on('userName', (text) => {
        console.log(text);
        this.session.userName = text;
        this.phoneNumberModal.hide();
      });

    },
    destroyed() {
      if (this.messageModal)
        $modal.destroy(this.messageModal)
      if (this.phoneNumberModal)
        $modal.destroy(this.phoneNumberModal)
      if (this.passwordModal)
        $modal.destroy(this.passwordModal)
    },
    methods: {
    	goabout(){
    			this.$router.push({path:'/about'})
    	},
    	
    	userFeedback(){
    		this.$router.push({path:'/user_feedback'})
    	},
    	gofavorite(){
    		this.$router.push({path:'/cars_favorite'})
    	},
      showMessageModal() {
        this.messageModal.show();
      },
      showPhoneNumberModal() {
        this.phoneNumberModal.show();
      },
      showPasswordModal() {
        this.passwordModal.show();
      },
      showCustomPopup() {
        let options = {
          effect: 'scale',
          title: '',
          buttons: [
            {text: '确定'},
            {text: '取消'},
          ]
        }

        let popup = $popup.fromTemplate('<p style="margin-bottom: 0; text-align: center;">自定义内容</p>', options)

        popup.show().then((buttonIndex) => {
          console.log(buttonIndex)
        })
      },
      showOutPopup() {
        let options = {
          effect: 'scale',
          title: '',
          buttons: [
            {text: '确定'},
            {text: '取消'},
          ]
        }

        let popup = $popup.fromTemplate('<p style="margin-bottom: 0; text-align: center;">确定解绑账户吗？</p>', options)

        popup.show().then((buttonIndex) => {
          console.log(buttonIndex);
          if (buttonIndex == 0) {
            this.logOut()
          }
        })
      },
      logOut(){
        axios.get(baseUrl+'/controller/unbindUserWxOpenId',{params:{
            userId:sess.get('userSession').userId
          }
        })
        .then(function(res){
          sess.remove('userSession')
          $router.back('/login');
        })
        
      }
    }
  }
</script>
<style scoped>
.user-box{
	background-color: #fff;
	padding:16px;
	margin-bottom: 10px;
	height: 132px;
	padding-left: 132px;
	position: relative;
}
.user-img{
	position: absolute;
	top: 16px;
	left: 16px;
	width: 100px;
	height: 100px;
	overflow: hidden;
}
.user-img img{
	width: 100%;
}
.user-info{
	width: 100%;
	height: 100px;
	overflow: hidden;
}
.user-info p{
	line-height: 25px;
	margin-bottom: 0px;
}
.outbtn{
	padding: 0 16px;
	
}
.outbtn div{
	background-color:#fd6b2c;
}
  
</style>
